<template>
  <div>
    <div id='order_echart' ref="myEchart"></div>
    <div class="pie_box clearfix">
      <div id='age_echart' ref="ageEchart"></div>
      <div id='area_echart' ref="areaEchart"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import { apiOrderMange } from 'js/api'

export default {
  data() {
    return {
      chart: null,
      ageChart: null,
      areaChart: null,
      // 折线
      option: {
        xAxis: {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          name: '2018年',
          nameLocation: 'end',
          nameTextStyle: {
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        yAxis: {
          type: 'value',
          name: '人',
          nameLocation: 'end',
          nameTextStyle: {
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        // title: {
        //   text: '交易总额： 0万元',
        //   x: 'right'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false
          }
        },
        series: [{
          name: '用户数',
          data: ['45', '65', '73', '79', '87', '95', '99', '108', '116', '130', '138', '145'],
          type: 'line',
          tooltip: {
            position: function () {
              var obj = {top: 60}
              obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5
              return obj
            },
            formatter: '{b0}: {c0}<br />{b1}: {c1}'
          }
        }]
      },
      // 饼图（年龄）
      ageOptions: {
        title: {
          text: '用户年龄范围',
          x: 'center',
          y: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: '20',
          bottom: '20',
          data: ['18-24', '25-29', '30-34', '35-39', '40以上']
        },
        series: [
          {
            name: '用户年龄',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            label: {
              formatter: '{b}: {d}%'
            },
            data: [
              {
                value: 177,
                name: '18-24',
                itemStyle: {
                  color: '#39c6c8'
                }
              },
              {
                value: 354,
                name: '25-29',
                itemStyle: {
                  color: '#b6a3dc'
                }
              },
              {
                value: 295,
                name: '30-34',
                itemStyle: {
                  color: '#5eb2ec'
                }
              },
              {
                value: 236,
                name: '35-39',
                itemStyle: {
                  color: '#fdb884'
                }
              },
              {
                value: 118, 
                name: '40以上',
                itemStyle: {
                  color: '#d67b81'
                }
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      // 饼图（地区）
      areaOptions: {
        title: {
          text: '用户地区分布',
          x: 'center',
          y: 10
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: '20',
          bottom: '20',
          data: ['江苏', '安徽', '上海', '广东', '其他']
        },
        series: [
          {
            name: '地区',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            label: {
              // formatter: '{b}: {c}\n{d}%'
              formatter: '{b}: {d}%'
            },
            data: [
              {
                value: 236,
                name: '江苏',
                itemStyle: {
                  color: '#39c6c8'
                }
              },
              {
                value: 177,
                name: '安徽',
                itemStyle: {
                  color: '#b6a3dc'
                }
              },
              {
                value: 236,
                name: '上海',
                itemStyle: {
                  color: '#5eb2ec'
                }
              },
              {
                value: 177,
                name: '广东',
                itemStyle: {
                  color: '#fdb884'
                }
              },
              {
                value: 354,
                name: '其他',
                itemStyle: {
                  color: '#d67b81'
                }
              }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // 折线图
      this.chart = echarts.init(this.$refs.myEchart)
      this.chart.setOption(this.option)

      // 饼图(年龄)
      this.ageChart = echarts.init(this.$refs.ageEchart)
      this.ageChart.setOption(this.ageOptions)

      // 饼图(地区)
      this.areaChart = echarts.init(this.$refs.areaEchart)
      this.areaChart.setOption(this.areaOptions)
    }
  }
}
</script>

<style lang="scss" scoped>
#order_echart {
  width: 100%;
  height: 500px;
  border: 1px solid #d7d7d7;
}
.pie_box {
  margin-top: 20px;
  padding-bottom: 20px;
  #age_echart {
    float: left;
    width: 45%;
    height: 500px;
    border: 1px solid #d7d7d7;
  }
  #area_echart {
    float: right;
    width: 45%;
    height: 500px;
    border: 1px solid #d7d7d7;
  }
}
</style>
